<template>
  <div class="list_wrap">
    <div class="title">按户籍统计注册店铺数</div>
    <div class="nav">
      <div
        class="nav_item"
        :style="index == 2 || index == 3 ? 'width: 30%' : 'width:20%'"
        v-for="(item, index) in navList"
        :key="index"
      >
        {{ item }}
      </div>
    </div>
    <div class="list_wrap_content_wrap">
      <transition-group appear class="transition">
        <div class="content" v-for="item in list" :key="item.id">
          <span class="No">No.{{ item.id }}</span>
          <span class="name">{{ item.name }}</span>
          <span class="value">{{ item.values[0] }}</span>
          <span class="value">{{ item.values[1] }}</span>
        </div>
      </transition-group>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navList: ['', '', '超市(户)', '宾馆(户)'],
      list: [
        // { name: '莲都区', values: [289, 1898] },
        // { name: '青田县', values: [239, 1081] },
        // { name: '缙云县', values: [199, 981] },
        // { name: '遂昌县', values: [189, 892] },
        // { name: '松阳县', values: [159, 599] },
        // { name: '云和县', values: [139, 398] },
        // { name: '庆元县', values: [129, 199] },
        // { name: '景宁县', values: [109, 189] },
        // { name: '龙泉市', values: [109, 119] },
      ],
      timer1: null,
      timer2: null,
      timer3: null,
    }
  },
  created() {
    this.list.forEach((item, index) => {
      this.$set(item, 'id', index + 1)
    })
    this.startTime()
  },
  methods: {
    delay(time) {
      return new Promise(resolve => setTimeout(resolve, time))
    },
    startTime() {
      let _that = this
      clearInterval(_that.timer1)
      let n = 0
      _that.timer1 = setInterval(async () => {
        if (n >= _that.list.length - 1) {
          _that.startTime()
        }
        let itObj = JSON.parse(JSON.stringify(_that.list[0]))
        _that.list.splice(0, 1)
        await _that.delay(1000)
        _that.list.push(itObj)
        n = n + 1
      }, 3000)
    },
  },
}
</script>

<style lang="scss" scoped>
.v-enter,
.v-leave-to {
  opacity: 0;
  transform: translateX(-150px);
}

.v-enter-active,
.v-leave-active {
  transition: all 1s ease;
}

/* 下面的 .v-move 和 .v-leave-active 配合使用，
能够实现列表后续的元素，渐渐飘上的效果（一般常用组合）*/
.v-move {
  transition: all 1s ease;
}

.v-leave-active {
  position: absolute;
}

.list_wrap {
  width: 100%;
  height: 100%;
  // border: 1px solid orange;
  background-color: rgba(7, 22, 79, 0.8);
}
.title {
  padding-top: 30px;
  width: 100%;
  text-align: center;
  font-size: 25px;
  line-height: 25px;
  color: #fff;
}
.nav {
  width: 100%;
  height: 50px;
  // border: 1px solid red;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-size: 14px;
  line-height: 14px;
  color: #fff;
  .nav_item {
    width: 25%;
    text-align: center;
    color: #fff;
  }
}
.transition {
  width: 100%;
}
.content {
  width: 100%;
  height: 70px;
  // border: 1px solid red;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 36px;
  line-height: 18px;
  .No {
    width: 20%;
    text-align: center;
    color: #58aacd;
    font-weight: bold;
  }
  .name {
    width: 20%;
    text-align: center;
    color: #fff;
  }
  .value {
    width: 30%;
    text-align: center;
    color: #29acd5;
    font-weight: bold;
  }
}
.list_wrap_content_wrap {
  height: 790px;
  overflow: hidden;
  cursor: pointer;
}
.list_wrap_content_wrap:hover {
  overflow-y: auto;
}
/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
.list_wrap_content_wrap::-webkit-scrollbar {
  width: 10px; /*对垂直流动条有效*/
  height: 10px; /*对水平流动条有效*/
  position: relative;
}
/*定义滚动条的轨道颜色、内阴影及圆角*/
.list_wrap_content_wrap::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: rgb(31, 49, 97);
  border-radius: 3px;
}
/*定义滑块颜色、内阴影及圆角*/
.list_wrap_content_wrap::-webkit-scrollbar-thumb {
  border-radius: 7px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: rgb(55, 80, 148);
  width: 5px;
  position: absolute;
}

/*定义两端按钮的样式*/
.list_wrap_content_wrap::-webkit-scrollbar-button {
  // background-color:cyan;
}

/*定义右下角汇合处的样式*/
.list_wrap_content_wrap::-webkit-scrollbar-corner {
  // background:khaki;
}
</style>
